<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 用户信息卡片 -->
        <section class="bg-white p-4">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e" 
                     alt="用户头像" 
                     class="w-16 h-16 rounded-full object-cover">
                <div class="ml-4">
                    <h2 class="font-semibold text-lg">张三</h2>
                    <p class="text-gray-500 text-sm member-status">普通用户</p>
                </div>
                <button class="ml-auto bg-blue-500 text-white px-4 py-2 rounded-full text-sm upgrade-btn">
                    升级会员
                </button>
                <!-- 隐藏的会员切换按钮 -->
                <button class="hidden ml-2 px-2 py-2 rounded-full bg-gray-200 toggle-member" 
                        style="opacity: 0.3;" 
                        onclick="toggleMemberStatus(event)">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
        </section>

        <!-- 功能列表 -->
        <section class="mt-4 bg-white">
            <a href="notifications.html" class="p-4 border-b flex items-center">
                <i class="fas fa-bell text-blue-500 w-6"></i>
                <span class="ml-3">消息通知</span>
                <i class="fas fa-chevron-right text-gray-400 ml-auto"></i>
            </a>
            <a href="settings.html" class="p-4 border-b flex items-center">
                <i class="fas fa-cog text-gray-500 w-6"></i>
                <span class="ml-3">通用设置</span>
                <i class="fas fa-chevron-right text-gray-400 ml-auto"></i>
            </a>
            <a href="privacy.html" class="p-4 border-b flex items-center">
                <i class="fas fa-shield-alt text-green-500 w-6"></i>
                <span class="ml-3">隐私设置</span>
                <i class="fas fa-chevron-right text-gray-400 ml-auto"></i>
            </a>
            <a href="about.html" class="p-4 border-b flex items-center">
                <i class="fas fa-info-circle text-purple-500 w-6"></i>
                <span class="ml-3">关于我们</span>
                <i class="fas fa-chevron-right text-gray-400 ml-auto"></i>
            </a>
        </section>

        <!-- 会员权益 -->
        <section class="mt-4 bg-white p-4">
            <h3 class="font-semibold mb-3">会员权益</h3>
            <div class="bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg p-4 text-white">
                <h4 class="font-medium mb-2">开通会员享专属特权</h4>
                <p class="text-sm opacity-90">解锁全部高级功能，享受更好的服务体验</p>
                <button class="mt-3 bg-white text-blue-500 px-4 py-2 rounded-full text-sm font-medium">
                    立即开通
                </button>
            </div>
        </section>
    </div>

    <!-- 底部导航栏 -->
    <nav class="tab-bar">
        <div class="grid grid-cols-3 h-full">
            <a href="home.html" class="flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="features.html" class="flex flex-col items-center justify-center text-gray-400">
                <i class="fas fa-th-large text-xl"></i>
                <span class="text-xs mt-1">功能</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center justify-center text-blue-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <!-- 添加会员状态管理脚本 -->
    <script>
        // 初始化会员状态
        let isMember = false;
        
        // 显示开发者模式的会员切换按钮（连续点击5次升级会员按钮）
        let clickCount = 0;
        const upgradeBtn = document.querySelector('.upgrade-btn');
        upgradeBtn.addEventListener('click', (e) => {
            clickCount++;
            if (clickCount >= 5) {
                document.querySelector('.toggle-member').classList.remove('hidden');
                clickCount = 0;
            }
        });
        
        // 切换会员状态
        function toggleMemberStatus(e) {
            e.stopPropagation(); // 阻止事件冒泡
            isMember = !isMember;
            
            // 更新显示状态
            const statusText = document.querySelector('.member-status');
            const upgradeBtn = document.querySelector('.upgrade-btn');
            
            if (isMember) {
                statusText.textContent = '尊贵会员';
                upgradeBtn.textContent = '续费会员';
            } else {
                statusText.textContent = '普通用户';
                upgradeBtn.textContent = '升级会员';
            }
            
            // 存储会员状态
            localStorage.setItem('isMember', isMember);
        }
        
        // 页面加载时恢复会员状态
        document.addEventListener('DOMContentLoaded', () => {
            const savedStatus = localStorage.getItem('isMember');
            if (savedStatus === 'true') {
                isMember = true;
                document.querySelector('.member-status').textContent = '尊贵会员';
                document.querySelector('.upgrade-btn').textContent = '续费会员';
            }
        });

        // 添加退出登录功能
        function handleLogout() {
            localStorage.removeItem('isLoggedIn');
            localStorage.removeItem('isMember');
            window.location.href = 'login.html';
        }
    </script>
</body>
</html> 
